<script setup>
import { defineProps, computed } from 'vue';
import router from "@/router/index.js";

// 定义组件的 props
const props = defineProps({
  id: {
    type: [Number, null],
    required: true
  },
  avatar: {
    type: [String, null], // 允许为 null
    default: null, // 设置默认值为 null
    required: false // 由于有默认值，不再是必需的
  },
  nickname: {
    type: [String, null],
    default: null,
    required: false
  },
  description: {
    type: [String, null],
    default: null,
    required: false
  },
  tags: {
    type: Array,
    default: () => [], // 设置默认空数组
    required: false
  }
})
// 计算显示的标签和省略号
const displayedTags = computed(() => {
  if (props.tags.length > 5) {
    return props.tags.slice(0, 5);
  }
  return props.tags;
});

const hasMoreTags = computed(() => props.tags.length > 5);

/**
 * @description: 点击用户卡片
 */
const onClickUserCard = (id) => {
  router.push(`/user/detail/${id}`);
}
</script>

<template>
  <div class="user-card" @click="onClickUserCard(id)">
    <img v-if="avatar" :src="avatar" alt="Avatar" class="avatar" />
    <img v-else alt="" class="avatar" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" />
    <div class="user-info">
      <div class="user-name">{{ nickname || '无昵称' }}</div>
      <div class="user-description">{{ description || '暂无描述' }}</div>
      <div class="user-tags">
        <van-tag v-for="(item, index) in displayedTags" :key="index" class="tag-item" size="small" type="primary">
          {{ item }}
        </van-tag>
        <span v-if="hasMoreTags" class="tag-item">.....</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.user-card {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  margin-right: 15px;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  width: 250px;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 3px;
}

.user-description {
  width: 250px;
  font-size: 12px;
  color: #999;
  margin-bottom: 3px;
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.user-tags {
  width: 250px;
  display: flex;
  flex-wrap: wrap;
}

.tag-item {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
